<template>
  <div id="home">
    <van-sticky>
      <nav-bar
        class="nav-bar"
        :style="{ background: scrollTop > 44 ? 'var(--theme-color)' : 'white' }"
      >
        <i
          class="iconfont icon-saoma"
          :style="{ color: scrollTop > 44 ? 'white' : 'black' }"
          slot="left"
        ></i>
        <div class="search" slot="center">
          <i class="iconfont icon-iconseach"></i>
          搜索
        </div>
        <i
          class="iconfont icon-msg"
          :style="{ color: scrollTop > 44 ? 'white' : 'black' }"
          slot="right"
        ></i>
      </nav-bar>
    </van-sticky>

    <van-swipe class="swipe" :autoplay="3000" indicator-color="#00bfc0">
      <van-swipe-item v-for="(banner, index) in banners" :key="index">
        <img v-lazy="banner.image" />
      </van-swipe-item>
    </van-swipe>
    <recommend :recommend="recommend" />
    <div class="feature" />
    <van-sticky :offset-top="44">
      <tabs :tabs="['最新', '流行', '精选']" @change="handleChange" />
    </van-sticky>
    <van-list @load="onLoad" :immediate-check="false">
      <waterfall>
        <waterfall-item slot="left" :goods="goods[type].left"></waterfall-item>
        <waterfall-item
          slot="right"
          :goods="goods[type].right"
        ></waterfall-item>
      </waterfall>
    </van-list>

    <div class="loading" v-if="isLoading">
      <van-loading
        type="spinner"
        size="16"
        vertical
        color="#16c1bc"
        text-size="12px"
      >
        加载中
      </van-loading>
    </div>
    <back-top v-show="scrollTop > 1500" @click.native="backTop" />
  </div>
</template>

<script>
import { queryHome, queryGoods } from '../../api'
import NavBar from '../../components/nav-bar/nav-bar.vue'
import Recommend from '../../components/recommend/recommend.vue'
import Tabs from '../../components/tabs/tabs.vue'
import Waterfall from '../../components/waterfall/waterfall.vue'
import WaterfallItem from '../../components/waterfall/waterfall-item.vue'
import BackTop from '../../components/backtop/backtop.vue'
export default {
  components: { NavBar, Recommend, Tabs, Waterfall, WaterfallItem, BackTop },
  data() {
    return {
      banners: [],
      recommend: [],
      goods: {
        new: { page: 1, left: [], right: [] },
        pop: { page: 1, left: [], right: [] },
        sell: { page: 1, left: [], right: [] }
      },
      type: 'new',
      timer: null, // 计时器
      isLoading: false, // loading图标是否显示
      scrollTop: 0 // 浏览器滚动的高度
    }
  },
  mounted() {
    this.queryHome()
    this.queryGoods('new')
    this.queryGoods('pop')
    this.queryGoods('sell')
    this.scroll()
  },
  methods: {
    // 查询首页数据
    async queryHome() {
      const { data } = await queryHome()
      this.banners = data.banners
      this.recommend = data.recommend
    },
    // 查询商品
    async queryGoods(type) {
      let { page } = this.goods[type]
      const { data } = await queryGoods({ type, page })
      /*   console.log(data) */
      data.forEach((item, index) => {
        if (index % 2 == 0) {
          this.goods[type].right.push(item)
        } else {
          this.goods[type].left.push(item)
        }
      })
      this.goods[type].page++
    },
    // 切换商品类型
    handleChange(type) {
      this.type = type
    },
    // 滚动加载数据
    onLoad() {
      this.isLoading = true
      /** 防抖 */
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.queryGoods(this.type)
        this.isLoading = false
      }, 100)
    },
    // 监听页面滚动
    scroll() {
      window.addEventListener('scroll', () => {
        this.scrollTop =
          document.documentElement.scrollTop || window.pageYOffset
      })
    },
    // 返回顶部
    backTop() {
      document.documentElement.scrollTop = 44
      window.pageYOffset = 44
    }
  }
}
</script>

<style lang="less" scoped>
#home {
  background-color: #f7f7f7;
  height: 100vh;
  transition: all 0.5;
}
.nav-bar {
  .icon-saoma,
  .icon-msg {
    font-weight: 700;
  }
  .search {
    background: #edeeee;
    border-radius: 15px;
    text-align: left;
    padding: 6px 10px;
    color: #707378;
    font-size: 12px;
    .icon-iconseach {
      font-size: 12px;
    }
  }
}
.swipe {
  width: 93%;
  margin: 10px auto;
  border-radius: 7px;
  // 样式穿透 scoped
  /deep/ .van-swipe__indicator {
    background: white;
  }
}
.feature {
  height: 300px;
  background: url('../../assets/img/feature_bg.png') no-repeat;
  background-size: 100% 100%;
}
.loading {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
